<template>
    <div style="width: 1800px; margin-left: 10px">
        <h2 style="text-align: left; margin-left: 15px; font-size: 20px;">{{ title }}</h2>
          <el-row :gutter="20">
            <el-col :span="6" v-for="item in songListView.slice(0, 18)" :key="item.id">
                
                <div class="avatar_image">
                         <el-card shadow="hover" :body-style="{ padding: '5px', height: '79px' }"> 
                                    <el-avatar  shape="square" :size="80" fit="cover" :src="item.album.blurPicUrl" v-on:click="listMusic(item.id, item)"/>

                            </el-card>  
                        <div>
                            <h1>{{item.name}}</h1>
                            <h1>{{item.album.artists[0].name}}</h1>
                        </div>
                </div>
            </el-col>

         

        </el-row>
      </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref } from 'vue'
import {useStore} from 'vuex';
import {ListenMusic} from '../../../../../Hook/index';
import emitter from "../../../../../utils/eventbus";

export default defineComponent({
    name: "TopSong",
    setup() {
        const title = "热门歌曲>"
        const store = useStore();
        store.dispatch("contaniner/songListView");
        
        function listMusic(id: any, item: any){

           ListenMusic(id).then(
            ({data})=>{
                emitter.emit('listentMu', {object: item, url: {data}})
            },
            (erro)=>{

            }
           )

        }

        return{
            title,
            songListView: computed(()=> store.state.contaniner.songListView),
            listMusic,
        }
    },
})
</script>
<style lang="less" scoped>
.el-col{
    text-align: left;
    margin-left: 15px;
    .avatar_image{
        display: flex;
        padding-top: 15px;
        div{
            display: flex;
            flex-direction: column;
            font-size: 14px;
            justify-content: center;
            margin-left: 15px;

            h1{
                margin-top: 10px;
                & + h1{
                    margin-top: 10px;
                    
                }
            }
        }
    }
}
</style>
